<ion-header>
  <ion-navbar no-border-bottom>
    <ion-segment ionSelect [(ngModel)]="pet" color="danger">
      <ion-segment-button value="message">
        消息
      </ion-segment-button>
      <ion-segment-button value="notice">
        通知
      </ion-segment-button>
    </ion-segment>
  </ion-navbar>
</ion-header>
<ion-content>
    <!-- 下拉刷新 -->
    <ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新..." refreshingSpinner="circles" refreshingText="请稍等...">
      </ion-refresher-content>
    </ion-refresher>
  <div [ngSwitch]="pet">
    <ion-list *ngSwitchCase="'message'">

      <ion-item-sliding *ngFor="let item of messageList">
        <ion-item>
          <ion-thumbnail item-start>
            <img src="{{item.img}}">
          </ion-thumbnail>
          <h2>{{item.id}}</h2>
          <p>{{item.title}}</p>
        </ion-item>
        <ion-item-options> 
          <button style="width:5em;" (click)="removeItem($index)">
            <ion-icon class="col-6" ios="ios-trash" md="md-trash"></ion-icon>
            删除
          </button>
        </ion-item-options>
      </ion-item-sliding>

    </ion-list>

    <ion-list *ngSwitchCase="'notice'">
      <ion-item-sliding *ngFor="let item of items">
        <ion-item>
          <ion-thumbnail item-start>
            <img src="{{item.img}}">
          </ion-thumbnail>
          <h2>{{item.id}}=====</h2>
          <p>{{item.title}}</p>
        </ion-item>
        <ion-item-options>
          <button style="width:5em;" (click)="removeItem($index)">
            <ion-icon class="col-6" ios="ios-trash" md="md-trash"></ion-icon>
            删除
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
  </div>
</ion-content>
